<template>
  <div>

    <el-card style="min-height: 75vh">

      <div slot="header" style="display: flex;justify-content: space-between;align-items: center">
        <span>产品基本信息配置</span>
        <el-button
          @click="submitFormData('formData')"
          icon="el-icon-coin"
          type="primary"
        >保存配置
        </el-button>
      </div>

      <!--   form 产品基本信息表单 -->
      <el-form :label-width="globalLabelWidth" :model="formData" :rules="rule" ref="formData">
        <el-row :gutter="globalGutter">

          <el-col v-bind="globalGrid">
            <el-form-item label="产品名" prop="productName">
              <el-input
                placeholder="请输入产品名"
                v-model="formData.productName">
                <el-button icon="el-icon-present" slot="append"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="globalGrid">
            <el-form-item label="产品分类" prop="categoricalId">
              <productCategoricalSelect
                v-model="formData.categoricalId"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="globalGrid">
            <el-form-item label="编码" prop="code">
              <el-input disabled v-model="formData.code">
                <el-button icon="el-icon-s-ticket" slot="append"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="globalGutter">
          <el-col v-bind="globalGrid">
            <el-form-item label="切割文件" prop="cutFilePath">
              <el-input placeholder="C:\temp" v-model="formData.cutFilePath">
                <el-button icon="el-icon-folder" slot="append"></el-button>

              </el-input>
            </el-form-item>
          </el-col>

          <el-col v-bind="globalGrid">
            <el-form-item label="打印类型" prop="productPrintTypeId">
              <product-print-type v-model="formData.productPrintTypeId"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="globalGrid">
            <el-form-item label="输出类型" prop="productShopType">
              <ShopTypeSelect v-model="formData.productShopType"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="globalGutter">
          <el-col v-bind="globalGrid">
            <el-form-item label="产品显示尺寸" prop="productSize">
              <el-input v-model="formData.productSize">
                <el-button icon="el-icon-crop" slot="append"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="globalGrid">
            <el-form-item label="产品类型" prop="productType">
              <ProductSelect :disabled="true" v-model="formData.productType"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="globalGrid">
            <el-form-item label="单P重量" prop="singleWeight">
              <el-input v-model="formData.singleWeight">
                <el-button icon="el-icon-odometer" slot="append"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="globalGutter">
          <el-col v-bind="globalGrid">
            <el-form-item label="标准重量" prop="weight">
              <el-input v-model="formData.weight">
                <el-button icon="el-icon-time" slot="append"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="globalGrid">
            <el-form-item label="尺寸" prop="sizeDetailId">
              <!--            <el-input v-model="formData.sizeDetailId">-->
              <!--              <el-button icon="el-icon-full-screen" slot="append"></el-button>-->
              <!--            </el-input>-->
              <product-size-select :value.sync="formData.sizeDetailId"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="globalGutter">

          <el-col :span="24">
            <el-form-item label="产品描述" prop="describe">
              <el-input :rows="5" placeholder="请输入产品描述"
                        type="textarea"
                        v-model="formData.describe">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <!--      <el-row justify="end" type="flex">-->
      <!--        <el-col style="display: flex;justify-content: flex-end">-->
      <!--          <el-button-->
      <!--            @click="submitFormData('formData')"-->
      <!--            icon="el-icon-coin"-->
      <!--            type="primary"-->
      <!--          >修改并保存-->
      <!--          </el-button>-->
      <!--          &lt;!&ndash;        <el-button&ndash;&gt;-->
      <!--          &lt;!&ndash;          type="warning"&ndash;&gt;-->
      <!--          &lt;!&ndash;          icon="el-icon-refresh"&ndash;&gt;-->
      <!--          &lt;!&ndash;          @click="resetFormData('formData')"&ndash;&gt;-->
      <!--          &lt;!&ndash;        >重置&ndash;&gt;-->
      <!--          &lt;!&ndash;        </el-button>&ndash;&gt;-->
      <!--        </el-col>-->
      <!--      </el-row>-->
    </el-card>

<!--    <azure-line-select-->
<!--      :product-id="$route.query.ProductId"-->
<!--      :resultItems.sync="formData.productLineItemList"-->
<!--      style="margin-top: 10px;"-->
<!--    />-->

  </div>
</template>

<script>
  import layoutMixin from '@/mixins/layoutMixin'
  import form from '@/mixins/form'
  import productCategoricalSelect from '@/components/ATheFridayClub/businessSelect/product/productCategoricalSelect'
  import productPrintType from '@/components/ATheFridayClub/businessSelect/print/productPrintType'
  import ShopTypeSelect from '@/components/ATheFridayClub/businessSelect/product/shopTypeSelect'
  import ProductSelect from '@/components/ATheFridayClub/businessSelect/product/ProductSelect'
  import ProductStatusSelect from '@/components/ATheFridayClub/businessSelect/product/productStatusSelect'
  import { ModifyProduct, ModifyProductLine, PageQueryProduct } from '@/api/productInformation'
  import { objFirstKeyLowerCase } from '@/utils/fridayClub/objectUtil'
  import { ERR_OK } from '@/utils/commons'
  import ProductSizeSelect from '@/components/ATheFridayClub/businessSelect/product/productSizeSelect'
  import LineSelect from '@/components/ATheFridayClub/businessRelation/LineSelect'
  import AzureLineSelect from '@/components/ATheFridayClub/businessSelect/line/azureLineSelect'
  import ASelect from '@/components/ATheFridayClub/ASelect'
  import { debugLogger } from '@/utils/fridayClub/functianal'
  import AButton from '@/components/ATheFridayClub/AButton'
  //  基本信息编辑

  export default {
    name: 'halfProduct',
    components: {
      AButton,
      ASelect,
      AzureLineSelect,
      LineSelect,
      ProductSizeSelect,
      productCategoricalSelect, productPrintType, ShopTypeSelect,
      ProductSelect, ProductStatusSelect
    },
    data() {
      const validateCutFilePath = (rule, value, callback) => {
        const reg = /^[a-zA-Z]:\\(?:\w+\\?)*$/
        if (value === '') {
          return callback(new Error('文件路径不能为空'))
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的文件路径'))
        } else {
          return callback()
        }
      }
      return {

        formData: {
          // productLineIdList: [],  //  选择的产品线
          productLineItemList: [],
          // defaultProductLine: '', //  默认的产品线

          status: 1,
          productId: '',
          categoricalId: '',
          code: '',
          cutFilePath: '',
          describe: '',
          name: '',
          productPrintTypeId: '',
          productShopType: '',
          productSize: '',
          productType: '',
          singleWeight: '',
          sizeDetailId: '',
          weight: ''
        },
        rule: {

          productName: [
            { required: true, message: '产品名不能为空', trigger: ['change', 'blur'] }
          ],
          categoricalId: [
            { required: true, message: '产品分类不能为空', trigger: ['change', 'blur'] }
          ],
          // cutFilePath:[
          //   {required:true, validator: validateCutFilePath, trigger:['change','blur'] },
          // ],
          productPrintTypeId: [
            { required: true, message: '打印类型不能为空', trigger: ['change', 'blur'] }
          ],
          productShopType: [
            { required: true, message: '输出类型不能为空', trigger: ['change', 'blur'] }
          ],
          productSize: [
            { required: true, message: '产品显示尺寸不能为空', trigger: ['change', 'blur'] }
          ],
          productType: [
            { required: true, message: '产品类型不能为空', trigger: ['change', 'blur'] }
          ],
          singleWeight: [
            { required: true, message: '单P重量不能为空', trigger: ['change', 'blur'] }
          ],
          sizeDetailId: [
            { required: true, message: '尺寸不能为空', trigger: ['change', 'blur'] }
          ],
          weight: [
            { required: true, message: '标准重量不能为空', trigger: ['change', 'blur'] }
          ]
        }

      }
    },
    mixins: [layoutMixin, form],
      async created() {
      await this.getBaseData()
      this.clearValidate('formData')
    },
    methods: {
      async ModifyProductLine() {
        // productLineIdList: [],  //  选择的产品线
        //   productLineItemList: [],
        //   defaultProductLine: [], //  默认的产品线
        //  帮助用户默认选第一条
        // await ModifyProductLine(this.formData.productLineItemList.map(v => ({
        //   ...v, isDefault: (() => {
        //     // console.log(this.formData.defaultProductLine);
        //     // console.log(v['lineId']);
        //     return this.formData.defaultProductLine === v['lineId']
        //   })()
        // })))

      },

      // POST /api/Product/ModifyProductLine
      //提交修改
      submitFormData(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            //  ProductName
            const {
              formData: {
                productId, categoricalId, code, cutFilePath,
                describe, name, productPrintTypeId, productShopType, productSize,
                productType, singleWeight, sizeDetailId, weight, status, productName
              }
            } = this
            const { Code, Result } = await ModifyProduct([
              {
                productId, categoricalId, code, cutFilePath,
                describe, productPrintTypeId, productShopType, productSize,
                productType, singleWeight, sizeDetailId, weight, status, name: productName
              }
            ])

            // await this.ModifyProductLine()  //  修改产品线路
            if (Code === ERR_OK) {
              this.$message.success('修改组件基本信息成功！')
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async getBaseData({} = {}) {
        const { Code: code } = this.$route.query
        try {
          const { Code, Result } = await PageQueryProduct({ code })
          if (Code === ERR_OK) {
            const { Rows } = Result;
            // const setVo = v => ({
            //   ...v,productName:v.ProductName
            // })
            console.log(Rows,'303:::::::::::');
            ({ [0]: this.formData = {} } = Rows.map(v => objFirstKeyLowerCase(v)))
          } else {
            this.$message.warning('获取组件的详情信息失败')
          }
        } catch (e) {
          console.log(e)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
